<template>
  <div class="form_box" key="reg">
    <div class="wlogo"><img src="../../../../public/logo_w.png"></div>
    <a-form :form="form" @submit="handleSubmit">
      <!-- <a-form-item prop="user">
        <a-input
        v-decorator="[
          'username',
          {
            rules: [              
              {
                required: true,
                message: 'Please input your username!',
              },
            ],
          },
        ]"
      />
          <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)"/>
        </a-input>
      </a-form-item>-->
      <a-form-item class="password" prop="password1">
        <a-input
          size="large"
          placeholder="请输入密码"
          v-decorator="[
          'password1',
          {
            rules: [
              {
                required: true,
                message: '请输入至少6位数密码!!',
              },
              {
                validator: validateToNextPassword,
              },
            ],
          },
        ]"
          type="password"
        >
          <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
        </a-input>
      </a-form-item>
      <a-form-item class="password" prop="password2">
        <a-input
          size="large"
          placeholder="请确认密码"
          v-decorator="[
          'password2',
          {
            rules: [
              {
                required: true,
                message: '请确认您的密码!',
              },
              {
                validator: compareToFirstPassword,
              },
            ],
          },
        ]"
          type="password"
          @blur="handleConfirmBlur"
        >
          <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" size="large" html-type="submit">立即激活</a-button>
      </a-form-item>
      <a size="large" target="_blank" :href="this.$api.help.url.regsiter">无法激活？</a>
    </a-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: this.$form.createForm(this, { name: "register" }),
      confirmDirty: false      
    };
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          this.$api.auth
            .register({
              //username: this.formInline.user,
              password1: values.password1,
              password2: values.password2
            })
        }
      });
    },
    handleConfirmBlur(e) {
      const value = e.target.value;
      this.confirmDirty = this.confirmDirty || !!value;
    },
    compareToFirstPassword(rule, value, callback) {
      const form = this.form;
      if (value && value !== form.getFieldValue("password1")) {
        callback("您输入的两个密码不一致！");
      } else {
        callback();
      }
    },
    validateToNextPassword(rule, value, callback) {
      const form = this.form;
      if (value && this.confirmDirty) {
        form.validateFields(["password2"], { force: true });
      }
      callback();
    }
  }
};
</script>
<style lang="less" scoped>
</style>